<script>
// Fancybox 文档: https://fancyapps.com/fancybox/
import { Fancybox } from '@fancyapps/ui'
import '@fancyapps/ui/dist/fancybox/fancybox.css'
import {HTBridge} from '../assets/js/webViewBridgeSDK.self'
import $ from 'jquery'

export default {
  data () {
    return {
      target: '',  // 父元素
      slideIndex: 0, // 幻灯片定位
      slideImages: [], // 幻灯片数组
    }
  },
  methods: {
    nextClick () {
      // Fancybox.next()
    },
    createStart (startIndex = 0, slideImages = []) {
      if (slideImages.length === 0) {
        return
      }
      this.slideIndex = startIndex
      this.slideImages = slideImages
      Fancybox.destroy()
      new Fancybox(
        // 幻灯片项目数组
        slideImages,
        // 幻灯片参数
        {
          startIndex,
          hideScrollbar: false,
          Hash: false,
          Thumbs: false,
          Carousel: {
            Navigation: false
          },
          Toolbar: {
            items: {
              download: {
                tpl: `<button class="f-button"><svg tabindex="-1" width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2M7 11l5 5 5-5M12 4v12"></path></svg></button>`,
                click: async (v) => {
                  const imageUrl = this.slideImages[this.slideIndex]?.['src']
                  const params = { 'imageUrl': imageUrl }
                  console.log('mockImg', imageUrl)
                  HTBridge.saveImageToAlbum(params)
                },
              },
            },
            display: {
              left: [],
              middle: ['infobar'],
              right: HTBridge.inApp ? ['download','close'] : ['close'],
            },
          },
          on: {
            'Carousel.ready Carousel.change': (fancybox) => {
              // Current slide
              const slide = fancybox.getSlide()
              // console.log('slide', slide)
              this.slideIndex = slide.index
            }
          },
        }
      )
    },
    setSlideImages () {
      const $imgs = document.querySelectorAll(`${this.target} img`)
      // console.log('`${this.target} img`',`${this.target} img`)
      $imgs.length && $imgs.forEach(img => {
        const imgSrc = img.getAttribute('src')
        imgSrc.trim() && this.slideImages.push({
          src: imgSrc
        })
      })
      // console.log('slideImages',this.slideImages)
    },
    bindSlideClick(){
      const _this = this
      $(this.target).on('click', 'img', function (e) {
        _this.slideImages = []
        _this.setSlideImages()
        const src = e.target && e.target.getAttribute('src')
        const index = _this.slideImages.findIndex(item => item.src === src)
        // console.log('slideImages',_this.slideImages)
        // console.log('src',src)
        // console.log('index',index)
        _this.createStart(index, _this.slideImages)
      })

      function append () {
        $(_this.target).append(`<img src="https://newspic.finchina.com/2024/2024-09/2024-09-10/807fb39cdf-9ca94131e63d84da0ab91f3560306c7c.jpg" alt="" data-href="" style="width: 375px;">`)
      }

      setTimeout(() => {
        // append()
      }, 1000)
    },
    startInit (dom) {
      this.target = dom
      // this.setSlideImages()
      this.bindSlideClick()
    },
  },
  destroyed () {
    Fancybox.destroy()
  }
}
</script>

<template>
  <div class="fancySlid-container">
<!--        <button class="getBtn" type="button" @click="nextClick">next {{ slideIndex+1 }}/{{ slideImages.length }}</button>-->
  </div>
</template>

<style scoped lang="scss">
.getBtn {
  position: fixed;
  bottom: 50px;
  right: 50px;
  z-index: 1111;
}
</style>
